<!DOCTYPE html>
<html lang="en">
<head>
<title>新年</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="zxh/zxh.css">
<link rel="stylesheet" href="zxh/zxh1.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link href="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/css/bootstrap.min.css" rel="stylesheet">
        <script src="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/js/bootstrap.bundle.min.js"></script>
<style>
body {font-family: "Lato", sans-serif}
.mySlides {display: none}
#ad{
                position: fixed;
                bottom: 0;
                right: 20;
            }
 a:link {
  text-decoration: none;
}

a:visited {
  text-decoration: none;
  color:aqua;
}

a:hover {
  text-decoration: none;
  color:blanchedalmond;
}

a:active {
  text-decoration: none;
  color:beige;
}
</style>
</head>
<body>
<div class="w3-top">
  <div class="w3-bar w3-black w3-card">
    <a class="w3-bar-item w3-button w3-padding-large w3-hide-medium w3-hide-large w3-right" href="javascript:void(0)" onclick="myFunction()" title="Toggle Navigation Menu"><i class="fa fa-bars"></i></a>
    <a href="#" class="w3-bar-item w3-button w3-padding-large">首页</a>
    <a href="#band" class="w3-bar-item w3-button w3-padding-large w3-hide-small">历史</a>
    <a href="#tour" class="w3-bar-item w3-button w3-padding-large w3-hide-small">现在</a>
    <a href="#contact" class="w3-bar-item w3-button w3-padding-large w3-hide-small">将来</a>
    <div class="w3-dropdown-hover w3-hide-small">
      <button class="w3-padding-large w3-button" title="More">春节<i class="fa fa-caret-down"></i></button>     
      <div class="w3-dropdown-content w3-bar-block w3-card-4">
        <a href="#" class="w3-bar-item w3-button">国外</a>
        <a href="#" class="w3-bar-item w3-button">国内</a>
        <a href="#" class="w3-bar-item w3-button">乡村</a>
      </div>
    </div>
    <a href="javascript:void(0)" class="w3-padding-large w3-hover-red w3-hide-small w3-right"><i class="fa fa-search"></i></a>
  </div>
</div>
<div id="navDemo" class="w3-bar-block w3-black w3-hide w3-hide-large w3-hide-medium w3-top" style="margin-top:46px">
  <a href="#band" class="w3-bar-item w3-button w3-padding-large" onclick="myFunction()">首页</a>
  <a href="#tour" class="w3-bar-item w3-button w3-padding-large" onclick="myFunction()">历史</a>
  <a href="#contact" class="w3-bar-item w3-button w3-padding-large" onclick="myFunction()">现在</a>
  <a href="#" class="w3-bar-item w3-button w3-padding-large" onclick="myFunction()">将来</a>
</div>
<div class="w3-content" style="max-width:2000px;margin-top:46px">
  <div class="mySlides w3-display-container w3-center">
    <img src="zp/1.jpg" style="width:100%">
    <div class="w3-display-bottommiddle w3-container w3-text-white w3-padding-32 w3-hide-small">
      <h3>齐放烟花</h3>
      <p><b>人们在广场上放烟花，庆祝春节的到来!</b></p>   
    </div>
  </div>
  <div class="mySlides w3-display-container w3-center">
    <img src="zp/2.jpg" style="width:100%">
    <div class="w3-display-bottommiddle w3-container w3-text-white w3-padding-32 w3-hide-small">
      <h3>新年</h3>
      <p><b>漫天的烟花映衬春节的喜庆！</b></p>    
    </div>
  </div>
  <div class="mySlides w3-display-container w3-center">
    <img src="zp/3.jpg" style="width:100%">
    <div class="w3-display-bottommiddle w3-container w3-text-white w3-padding-32 w3-hide-small">
      <h3>兔年</h3>
      <p><b>中国下一个农历年！</b></p>    
    </div>
  </div>
  <div class="mySlides w3-display-container w3-center">
    <img src="zp/5.jpg" style="width:100%">
    <div class="w3-display-bottommiddle w3-container w3-text-white w3-padding-32 w3-hide-small">
      <h3>兔年</h3>
      <p><b>人们拍摄烟花！</b></p>    
    </div>
  </div>
  <div class="w3-container w3-content w3-center w3-padding-64" style="max-width:800px" id="band">
    <h2 class="w3-wide"><a href="wee.html" target="_blank">春节</a></h2>
    <p class="w3-opacity"><i>中国人民都喜爱春节</i></p>
    <p class="w3-justify">春节（Spring Festival），即中国农历新年，俗称新春、新岁、岁旦等，口头上又称过年、过大年。春节历史悠久，由上古时代岁首祈岁祭祀演变而来。万物本乎天、人本乎祖，祈岁祭祀、敬天法祖，报本反始也。春节的起源蕴含着深邃的文化内涵，在传承发展中承载了丰厚的历史文化底蕴。在春节期间，全国各地均有举行各种庆贺新春活动，带有浓郁的各地地方特色。这些活动以除旧布新、驱邪攘灾、拜神祭祖、纳福祈年为主要内容，形式丰富多彩，凝聚着中华传统文化精华。 
        在早期观象授时时代，依据斗转星移定岁时，“斗柄回寅”为岁首。“斗柄回寅”大地回春，终而复始，万象更新，新的轮回由此开启。在传统的农耕社会，立春岁首具有重要的意义，衍生了大量与之相关的岁首节俗文化。在历史发展中虽然使用历法不同而岁首节庆日期不同，但是其节庆框架以及许多民俗沿承了下来。在现代，人们把春节定于农历正月初一，但一般至少要到正月十五新年才算结束。春节是集拜神祭祖、祈福辟邪、亲朋团圆、欢庆娱乐和饮食为一体的民俗大节。
        百节年为首，春节是中华民族最隆重的传统佳节。受到中华文化的影响，世界上一些国家和地区也有庆贺新春的习俗。据不完全统计，已有近20个国家和地区把中国春节定为整体或者所辖部分城市的法定节假日。春节与清明节、端午节、中秋节并称为中国四大传统节日。春节民俗经国务院批准列入第一批国家级非物质文化遗产名录。</p>
    <div class="w3-row w3-padding-32">
      <div class="w3-third">
        <p>春节图片一</p>
        <img src="zp/4.jpg" class="w3-round w3-margin-bottom" alt="Random Name" style="width:60%">
      </div>
      <div class="w3-third">
        <p>春节图片二</p>
        <img src="zp/6.jpg" class="w3-round w3-margin-bottom" alt="Random Name" style="width:60%">
      </div>
      <div class="w3-third">
        <p>春节图片三</p>
        <img src="zp/7.jpg" class="w3-round" alt="Random Name" style="width:60%">
      </div>
    </div>
  </div>
  <div id="ad">
    <a class="btn btn-primary" data-bs-toggle="offcanvas" href="#offcanvasExample" role="button" aria-controls="offcanvasExample">
      收藏栏
    </a>
    <div class="offcanvas offcanvas-start" tabindex="-1" id="offcanvasExample" aria-labelledby="offcanvasExampleLabel">
      <div class="offcanvas-header">
        <h5 class="offcanvas-title" id="offcanvasExampleLabel">收藏栏</h5>
        <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
      </div>
      <div class="offcanvas-body">
        <div>
         收藏的电影与音乐
        </div>
        <div class="dropdown mt-3">
          <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown">
            Dropdown button
          </button>
          <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton">
            <li><a class="dropdown-item" href="#">收藏的电影</a></li>
            <li><a class="dropdown-item" href="#">收藏的音乐</a></li>
            <li><a class="dropdown-item" href="#">其他的收藏</a></li>
          </ul>
        </div>
      </div>
    </div>
</div>
  <div class="w3-black" id="tour">
    <div class="w3-container w3-content w3-padding-64" style="max-width:800px">
      <h2 class="w3-wide w3-center">春节旅行购票</h2>
      <p class="w3-opacity w3-center"><i>请注意购票地区！</i></p><br>

      <ul class="w3-ul w3-border w3-white w3-text-grey">
        <li class="w3-padding">十一月 <span class="w3-tag w3-red w3-margin-left">待售</span></li>
        <li class="w3-padding">十二月 <span class="w3-tag w3-red w3-margin-left">售光</span></li>
        <li class="w3-padding">一月<span class="w3-badge w3-right w3-margin-right">1200</span></li>
      </ul>

      <div class="w3-row-padding w3-padding-32" style="margin:0 -16px">
        <div class="w3-third w3-margin-bottom">
          <img src="zp/9.jpg" alt="北京" style="width:100%" class="w3-hover-opacity">
          <div class="w3-container w3-white">
            <p><b>北京</b></p>
            <p class="w3-opacity">2023年1月10号</p>
            <p>世界是一本书，不旅行的人只看到其中的一页。</p>
            <button class="w3-button w3-black w3-margin-bottom" onclick="document.getElementById('ticketModal').style.display='block'">购票</button>
          </div>
        </div>
        <div class="w3-third w3-margin-bottom">
          <img src="zp/10.jpg" alt="敦煌" style="width:100%" class="w3-hover-opacity">
          <div class="w3-container w3-white">
            <p><b>敦煌</b></p>
            <p class="w3-opacity">2022年12月31号</p>
            <p>一个背包，几本书，所有喜欢的歌，一张单程车票，一颗潇洒的心。</p>
            <button class="w3-button w3-black w3-margin-bottom" onclick="document.getElementById('ticketModal').style.display='block'">购票</button>
          </div>
        </div>
        <div class="w3-third w3-margin-bottom">
          <img src="zp/11.jpg" alt="San Francisco" style="width:100%" class="w3-hover-opacity">
          <div class="w3-container w3-white">
            <p><b>伦敦</b></p>
            <p class="w3-opacity">2023年1月13号</p>
            <p>总会相逢的，就像山川河流，就像万河归海。</p>
            <button class="w3-button w3-black w3-margin-bottom" onclick="document.getElementById('ticketModal').style.display='block'">购票</button>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div id="ticketModal" class="w3-modal">
    <div class="w3-modal-content w3-animate-top w3-card-4">
      <header class="w3-container w3-teal w3-center w3-padding-32"> 
        <span onclick="document.getElementById('ticketModal').style.display='none'" 
       class="w3-button w3-teal w3-xlarge w3-display-topright">×</span>
        <h2 class="w3-wide"><i class="fa fa-suitcase w3-margin-right"></i>购票窗口</h2>
      </header>
      <div class="w3-container">
        <p><label><i class="fa fa-shopping-cart"></i>请选择票的类型</label></p>
        <input class="w3-input w3-border" type="text" placeholder="多少张?">
        <p><label><i class="fa fa-user"></i>发送到</label></p>
        <input class="w3-input w3-border" type="text" placeholder="发送到邮箱">
        <button class="w3-button w3-block w3-teal w3-padding-16 w3-section w3-right">支付 <i class="fa fa-check"></i></button>
        <button class="w3-button w3-red w3-section" onclick="document.getElementById('ticketModal').style.display='none'">关闭 <i class="fa fa-remove"></i></button>
        <p class="w3-right">Need <a href="#" class="w3-text-blue">帮助?</a></p>
      </div>
    </div>
  </div>
  <div class="w3-container w3-content w3-padding-64" style="max-width:800px" id="contact">
    <h2 class="w3-wide w3-center">春节素材投稿</h2>
    <p class="w3-opacity w3-center"><i>投稿人？请写下自己的信息</i></p>
    <div class="w3-row w3-padding-32">
      <div class="w3-col m6 w3-large w3-margin-bottom">
        <i class="fa fa-map-marker" style="width:30px"></i> 国家，城市<br>
        <i class="fa fa-phone" style="width:30px"></i> 电话号码<br>
        <i class="fa fa-envelope" style="width:30px"> </i>邮箱<br>
      </div>
      <div class="w3-col m6">
        <form action="/action_page.php" target="_blank">
          <div class="w3-row-padding" style="margin:0 -16px 8px -16px">
            <div class="w3-half">
              <input class="w3-input w3-border" type="text" placeholder="名字" required name="名字">
            </div>
            <div class="w3-half">
              <input class="w3-input w3-border" type="text" placeholder="邮箱" required name="邮箱">
            </div>
          </div>
          <input class="w3-input w3-border" type="text" placeholder="信息" required name="信息">
          <button class="w3-button w3-black w3-section w3-right" type="submit">发送</button>
        </form>
      </div>
    </div>
  </div>
</div>
<img src="zp/12.webp" class="w3-image w3-greyscale-min" style="width:100%">
<footer class="w3-container w3-padding-64 w3-center w3-opacity w3-light-grey w3-xlarge">
  <i class="fa fa-facebook-official w3-hover-opacity"></i>
  <i class="fa fa-instagram w3-hover-opacity"></i>
  <i class="fa fa-snapchat w3-hover-opacity"></i>
  <i class="fa fa-pinterest-p w3-hover-opacity"></i>
  <i class="fa fa-twitter w3-hover-opacity"></i>
  <i class="fa fa-linkedin w3-hover-opacity"></i>
   <section class="m-page-navigation">
      <div class="container">
        <div class="row">
          <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
            <div class="h-titles h-navs">
              <a href="index.html">
                <span class="nav-arrow scrolla-element-anim-1 scroll-animate" data-animate="active">
                  点击返回主页>
                </span>
                <span class="h-title splitting-text-anim-2 scroll-animate" data-splitting="chars" data-animate="active">
                  
                </span>
              </a>
            </div>
          </div>
        </div>
      </div>
    </section>
  <p class="w3-medium">网页来自 <a href="https://www.w3schools.com/w3css/default.asp" target="_blank">周芯豪</a></p>
</footer>

<script>
var myIndex = 0;
carousel();

function carousel() {
  var i;
  var x = document.getElementsByClassName("mySlides");
  for (i = 0; i < x.length; i++) {
    x[i].style.display = "none";  
  }
  myIndex++;
  if (myIndex > x.length) {myIndex = 1}    
  x[myIndex-1].style.display = "block";  
  setTimeout(carousel, 4000);    
}
function myFunction() {
  var x = document.getElementById("navDemo");
  if (x.className.indexOf("w3-show") == -1) {
    x.className += " w3-show";
  } else { 
    x.className = x.className.replace(" w3-show", "");
  }
}
var modal = document.getElementById('ticketModal');
window.onclick = function(event) {
  if (event.target == modal) {
    modal.style.display = "none";
  }
}
</script>

</body>
</html>
